<template>

    <div>
      <div style="display:flex;justify-content:flex-start;bottom:6px;position:relative;">
      <!-- 触发弹窗的按钮 -->
      <el-button type="primary" @click="dialogVisible = !dialogVisible" >列设置</el-button>
      </div>
      <!-- 列设置抽屉 -->
      <el-drawer title="列设置" v-model="dialogVisible" >
        
        <!-- 搜索和复选框区域 -->
        <div style="display: flex; justify-content: space-between; padding-bottom: 20px;">
          <!-- 搜索框 -->
          <el-input v-model="searchTerm" placeholder="请输入搜索列名" clearable @input="filterColumns" style="width: 240px;position: relative;bottom:20px;" />
          <div style="width:30%;position:relative;left:20px;bottom:16px;font-weight:bold;">已选字段：{{selectedColumns.length}}</div>
          <!-- 全选复选框 -->
          <div style="position:relative;right:326px;top:18px">
          <el-checkbox v-model="allSelected" @change="toggleAllColumns">{{ allSelected ? '取消全选' : '全选' }}</el-checkbox>
          </div>
        </div>
  
        <!-- 所有列复选框区域 -->
        <div>
          <el-checkbox-group v-model="selectedColumns" @change="handleColumnChange" style="display:flex;flex-direction:column;" >
            <el-checkbox v-for="column in filteredColumns" :key="column.key" :label="column.key" >
              {{ column.title }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        
        
        
        
        <!-- 选中的非冻结列显示区域 -->
        <div style="margin-left:240px;position: relative;bottom:290px;">
          <p style="position:relative;bottom:48px;">冻结列</p>
          <p style="position:relative;bottom:18px;">非冻结列</p>
          <ul style="display:flex;flex-direction:column;gap:18px;margin-left:2px;">
            <li v-for="column in nonFrozenSelectedColumns" :key="column.key" >￥{{ column.title }}</li>
          </ul>
        </div>
       
        <!-- 底部操作按钮 -->
        <span slot="footer" style="position:fixed;bottom:10px;">
        <el-divider style="position:fixed;bottom:40px;"></el-divider>
          <el-button type="plain" @click="resetSettings" >重置</el-button>
        </span>
      </el-drawer>
  
      <!-- 表格显示 -->
     <el-table style="width:100%">
          <el-table-column
            v-for="column in visibleColumns"
            :key="column.key"
            :prop="column.key"
            :label="column.title"
          >
              
          </el-table-column>
     </el-table>

      <!-- <el-pagination
    class="pager"
    background
    layout="prev,pager,next"
    size="small"
    :total="config.total"
    @current-change="handleChange"
  /> -->
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch,reactive } from 'vue';
  import {  getCurrentInstance, onMounted,nextTick} from "vue";
  const columns = ref([
    { key: 'id', title: '单号', frozen: false },
    { key: 'time', title: '处理时间', frozen: false },
    { key: 'person', title: '处理人名称', frozen: false },
    { key: 'EmployeeNumber',title: '处理人工号', frozen: false },
    { key: 'number', title: '序号', frozen: false },
    { key: 'MessageContent', title: '消息内容', frozen: false },
    { key: 'changetime', title: '变更时间', frozen: false },
    { key: 'changename', title: '变更人名称', frozen: false },
    { key: 'changenumber',title: '变更人工号', frozen: false },
    { key: 'state',title: '状态', frozen: false },
    { key: 'type',title: '类型', frozen: false }
  ]);
  
  //const tableData = ref([]);
  const dialogVisible = ref(false);
  const selectedColumns = ref(columns.value.map(column => column.key)); // 默认全选
  const searchTerm = ref('');
  const visibleColumns = ref(columns.value);
  const allSelected = ref(true); // 默认全选状态
  
  // 动态筛选后的列
  const filteredColumns = computed(() => {
    return columns.value.filter(column => column.title.toLowerCase().includes(searchTerm.value.toLowerCase()));
  });
  
  // 非冻结列且被选中的列
  // const nonFrozenSelectedColumns = computed(() => {
  //   return columns.value.filter(column => !column.frozen && selectedColumns.value.includes(column.key));
  // });
  //非冻结列并且被选中的列
  const nonFrozenSelectedColumns=computed(()=>{
    return columns.value.filter(col=>!col.frozen&&selectedColumns.value.includes(col.key))
  })
  
  // 处理列的选择和取消
  function handleColumnChange() {
    updateVisibleColumns();
    // 更新全选复选框状态
    allSelected.value = selectedColumns.value.length === columns.value.length;
  }
  
  // 更新表格中可见的列
  function updateVisibleColumns() {
    //visibleColumns.value = columns.value.filter(col => selectedColumns.value.includes(col.key));
    visibleColumns.value=columns.value.filter(item=>selectedColumns.value.includes(item.key))
  }
  
  // 切换全选/取消全选
  function toggleAllColumns() {
    if (allSelected.value) {
      selectedColumns.value = columns.value.map(column => column.key);
    } else {
      selectedColumns.value = [];
    }
    //updateVisibleColumns();
    updateVisibleColumns()
  }
  
  // 重置设置
  function resetSettings() {
    selectedColumns.value = columns.value.map(column => column.key); // 恢复默认全选
    visibleColumns.value = columns.value;
    searchTerm.value = '';
    allSelected.value = true;
  }
  const config=reactive({
    name:"",
    total:0,
    page:1
})

//   const {proxy}=getCurrentInstance()
// const getUserData=async ()=>{
//     let data=await proxy.$api.getUserData(config)
//     tableData.value=data.list.map(item=>({
//         ...item
       
//     }))
//     config.total=data.count
// }
// onMounted(()=>{
//   getUserData()
// })
  </script>
  
  <style scoped>
  
  .dialog-footer {
    display: flex;
    justify-content: flex-start;
  }
 


  </style>
  